<template>
  <div class="header">
    <div class="header-left" @click="action.back">
      <ChevronLeftIcon class="icon" /> {{ $t('common.headerView.headerBackText') }}
    </div>
    <div class="header-center">
      <t-input
        class="input"
        autofocus
        v-model="video.name"
        borderless
        v-if="state.isEditingName"
        @blur="action.toggleEditingName(false)"
        @enter="action.toggleEditingName(false)"
      >
      </t-input>
      <div class="name" v-else>{{ video.name }}</div>
      <Edit2Icon class="icon" @click="action.toggleEditingName(true)" />
    </div>
    <div class="header-right">
<!--      <t-button @click="action.toSaveVideo" :loading="state.saveLoading">-->
<!--        <template #icon>-->
<!--          <SaveIcon />-->
<!--        </template>-->
<!--保存-->
<!--</t-button>-->
      <t-button @click="action.toCreateVideo" :loading="state.createLoading">
        {{ $t('common.headerView.createVideoBtnText') }}
      </t-button>
    </div>
  </div>
</template>
<script setup>
import { reactive } from 'vue'
import { ChevronLeftIcon, SaveIcon, Edit2Icon } from 'tdesign-icons-vue-next'
import { useRouter } from 'vue-router'

const props = defineProps({
  onSubmit: {
    type: Function,
    default: async () => {}
  },
  onSave: {
    type: Function,
    default: async () => {}
  }
})

const video = defineModel({})

const router = useRouter()

const state = reactive({
  createLoading: false,
  saveLoading: false,
  isEditingName: false
})

const action = {
  back() {
    router.back()
  },
  toggleEditingName(isEditingName) {
    state.isEditingName = isEditingName
  },
  async toSaveVideo() {
    state.saveLoading = true
    await props.onSave()
    state.saveLoading = false
  },
  async toCreateVideo() {
    state.createLoading = true
    await props.onSubmit()
    state.createLoading = false
  }
}
</script>
<style lang="less" scoped>
.header {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px 0 23px;
  -webkit-app-region: drag;
  -webkit-user-select: none;
  background-color: #ffffff;  // 添加白色背景
  border-bottom: 1px solid #e0e0e0;  // 添加浅灰色底部边框
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);  // 添加轻微阴影增强立体感

  &-left {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333333;  // 白色文字改为深灰色
    gap: 6px;
    cursor: pointer;
    padding-right: 20px;
    border-right: 1px solid rgba(0, 0, 0, 0.15);  // 半透明白色边框改为半透明黑色
    -webkit-app-region: no-drag;

    .icon {
      font-size: 20px;
    }
  }

  &-center {
    flex: 1;
    padding: 0 30px;
    display: flex;
    align-items: center;
    gap: 4px;

    .input {
      width: 300px;
      --td-bg-color-specialcomponent: #f5f5f5;  // 深色背景改为浅灰色
      --td-text-color-primary: #333333;  // 白色文字改为深灰色
      --td-text-color-placeholder: rgba(0, 0, 0, 0.4);  // 半透明白色改为半透明黑色
      --td-bg-color-container-hover: transparent;
      -webkit-app-region: no-drag;

      :deep(.t-input) {
        border-color: rgba(0, 0, 0, 0.2);  // 半透明白色边框改为半透明黑色

        &:hover, &:focus {
          border-color: #0052d9;  // 悬停和聚焦时使用品牌蓝色
        }
      }

      :deep(.t-input--focused) {
        box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.1);  // 添加轻微的蓝色聚焦阴影
      }
    }

    .name {
      font-weight: 600;
      font-size: 14px;
      color: #333333;  // 白色文字改为深灰色
      line-height: 16px;
      -webkit-app-region: no-drag;
    }

    .icon {
      color: #666666;  // 灰色图标调整为更深的灰色，增强对比度
      cursor: pointer;
      font-size: 16px;
      -webkit-app-region: no-drag;

      &:hover {
        color: #333333;  // 添加悬停效果
      }
    }
  }

  &-right {
    display: flex;
    align-items: center;
    gap: 16px;
    -webkit-app-region: no-drag;
  }
}
</style>
